<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
	  xmlns:shiro="http://www.thymeleaf.org/thymeleaf-extras-shiro">

<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Home</title>
<!-- plugins:css -->
<link rel="stylesheet" href="/node_modules/mdi/css/materialdesignicons.min.css">
<link rel="stylesheet" href="/node_modules/perfect-scrollbar/dist/css/perfect-scrollbar.min.css">
<!-- endinject -->
<!-- plugin css for this page -->
<link rel="stylesheet" href="/node_modules/jquery-bar-rating/dist/themes/css-stars.css">
<link rel="stylesheet" href="/node_modules/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css" />
<!-- End plugin css for this page -->
<!-- inject:css -->
<link rel="stylesheet" href="/css/style.css">
<!-- endinject -->
<link rel="shortcut icon" href="/images/favicon.png" />

	<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.9/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />


	<style>
		.table th,.table td{
			 text-align: center;
		 }

		table td .textImg{
			width: auto;height: 70px;border-radius:0;display: block;margin: 0 auto;
		}
		/*用于拟态框验证*/
		#defaultForm>.form-group .error {
			color: red;
		}
	</style>

</head>
<body>
<div class="container-scroller">

	<!--顶部-->
	<div th:replace="~{commons/commons::top}"></div>

<!-- partial -->
<div class="container-fluid page-body-wrapper">
  <div class="row row-offcanvas row-offcanvas-right" >

	  <!--	  侧边-->
	  <div th:replace="~{commons/commons::cebian}"></div>

	<!-- partial -->
	  <div class="card content-wrapper" >
		  <div class="card-body" style="background-color: white">
<!--			  <h4 class="card-title">song</h4>-->
			  <h4 class="card-title float-left" style="margin: 0 50px 20px 0">Singer Music</h4>
			  <button shiro:hasPermission="admin:addUpdate" class="btn btn-primary btn-sm float-left" data-toggle="modal" data-target="#myModal" style="margin: 0 0 20px 0">
				  添加歌曲
			  </button>
			  <button shiro:hasPermission="admin:addUpdate" class="btn btn-primary btn-sm float-left" data-toggle="modal" data-target="#myModal2" style="margin: 0 0 20px 20px">
				  批量添加
			  </button>
			  <div class="table-responsive ps ps--theme_default" data-ps-id="6eeda779-4ea8-09e7-caef-8e1ec24de8ab">
				  <table class="table table-bordered">
					  <thead>
					  <tr>
						  <th>
							  头像
						  </th>
						  <th>
							  专辑图片
						  </th>
						  <th>
							  歌手名
						  </th>
						  <th>
							  歌名
						  </th>
						  <th>
							  发布时间
						  </th>
						  <th>
							  音频
						  </th>
						  <th shiro:hasPermission="admin:delete">
							  删除
						  </th>
					  </tr>
					  </thead>
					  <tbody>
					  <tr th:each="music:${musicBean}">
						  <td>
							  <img th:src="@{${singerBean.head_img}}"  class="textImg"   alt="">
						  </td>
						  <td>
							  <img th:src="@{${music.image}}"  class="textImg"   alt="">
						  </td>
						  <td>
							  [[${singerBean.name}]]
						  </td>
						  <td>
							  [[${music.song_title}]]
						  </td>
						  <td class="py-1">
							  [[${music.release_time}]]
						  </td>
						  <td>
							  <audio th:src="@{${music.music_path}}" controls="controls" ></audio>
						  </td>
						  <td shiro:hasPermission="admin:delete">
							  <a th:href="@{'/admin/delete/musicDelete?id='+${music.id}+'&singer_id='+${music.singer_id}}" type="button" class="btn btn-gradient-warning btn-rounded btn-fw">删除</a>
						  </td>

					  </tr>


					  </tbody>
				  </table>
				  <div class="ps__scrollbar-x-rail" style="left: 0px; bottom: 0px;"><div class="ps__scrollbar-x" tabindex="0" style="left: 0px; width: 0px;"></div></div><div class="ps__scrollbar-y-rail" style="top: 0px; right: 0px;"><div class="ps__scrollbar-y" tabindex="0" style="top: 0px; height: 0px;"></div></div></div>
		  </div>
	  </div>

	<!-- partial -->
  </div>
  <!-- row-offcanvas ends -->
</div>
<!-- page-body-wrapper ends -->
</div>

<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">

				<h4 class="modal-title" id="myModalLabel">
					添加歌曲
				</h4>
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
			</div>
			<!--			<div class="modal-body">-->
			<!--				在这里添加一些文本-->
			<!--			</div>-->
			<form th:action="@{'/admin/add/insetMusic?singer_id='+${singerBean.id}}" class="modal-body" id="defaultForm" method="post" enctype="multipart/form-data">
				<div class="form-group">
					<label for="song_title">歌名</label>
					<input type="text" class="form-control" name="song_title" id="song_title" placeholder="例如：斗牛">
				</div>
				<div class="form-group">
					<label for="file1">上传图片</label>
					<input id="file1" name="file1" type="file" class="file" data-show-preview="false" accept="image/*">
				</div>
				<div class="form-group">
					<label for="file2">上传音频</label>
					<input id="file2" name="file2" type="file" class="file" data-show-preview="false" accept="audio/*">
				</div>

				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭
					</button>
					<button type="submit" class="btn btn-primary">
						提交
					</button>
				</div>
			</form>
		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
</div>

<!--用于批量添加-->
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">

				<h4 class="modal-title" id="myModalLabel2">
					添加歌手
				</h4>
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
			</div>
			<!--			<div class="modal-body">-->
			<!--				在这里添加一些文本-->
			<!--			</div>-->
			<form th:action="@{'/admin/add/insetMusicList?singer_id='+${singerBean.id}}" class="modal-body" id="defaultForm2" method="post" enctype="multipart/form-data">

				<div class="form-group">
					<label for="files">上传歌手歌曲文件夹</label>
					<input id="files" name="files" type="file" multiple class="file" webkitdirectory  data-show-preview="false" >
				</div>

				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭
					</button>
					<button type="submit" class="btn btn-primary">
						提交
					</button>
				</div>
			</form>
		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
</div>


<!-- plugins:js -->
<script src="/node_modules/jquery/dist/jquery.min.js"></script>
<script src="/node_modules/popper.js/dist/umd/popper.min.js"></script>
<script src="/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="/node_modules/perfect-scrollbar/dist/js/perfect-scrollbar.jquery.min.js"></script>
<!-- endinject -->
<!-- Plugin js for this page-->
<script src="/node_modules/chart.js/dist/Chart.min.js"></script>
<!-- End plugin js for this page-->
<!-- inject:js -->
<script src="/js/off-canvas.js"></script>
<script src="/js/misc.js"></script>
<!-- endinject -->
<!-- Custom js for this page-->
<script src="/js/dashboard.js"></script>
<!-- End custom js for this page-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<!-- bootstrap.min.js below is needed if you wish to zoom and preview file content in a detail modal
    dialog. bootstrap 4.x is supported. You can also use the bootstrap js 3.3.x versions. -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" type="text/javascript"></script>
<!-- the main fileinput plugin file -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.9/js/fileinput.min.js"></script>
<!-- optionally if you need a theme like font awesome theme you can include it as mentioned below -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.9/themes/fa/theme.js"></script>
<!-- optionally if you need translation for your language then include  locale file as mentioned below -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.9/js/locales/(lang).js"></script>

<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script src="/js/singer_song-Valid.js"></script>


</body>
<script>
	//点击提交
	// $.validator.setDefaults({
	//   submitHandler: function() {
	//     alert("提交事件!");
	//   }
	// });
	$().ready(function() {
		$("#defaultForm").validate();
	});
</script>

</html>
